웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
[jQuery] 클래스의 추가, 제거 및 확인, removeClass(), addClass(), hasClass()
Last Modified : 2018-07-25 / Created : 2016-05-30
제이쿼리를 사용하여 스타일 추가 및 제거하기 위해 클래스(class) 속성을 선택자로 사용합니다. 그 외에 동적인 스크립트 및 액션 등은 자바스크립트의 ID 값을 많이 사용합니다. 이렇게 클래스명을 추가하거나 제거하면 간단하게 원하는 스타일을 추가 또는 제거하는 것이 가능합니다. 물론 해당하는 class에는 스타일이 css에 선언되어야겠죠.
# 제이쿼리를 사용한 스타일 추가 및 제거 방법
아래는 제이쿼리(jQuery)를 사용하여 클래스명을 추가, 삭제하는 방법에 대하여 알아보려고 합니다. 또한 현재 어떤 클래스를 가지고 있는지도 확인할 수 있는 메소드도 함께 알아보도록 하겠습니다.! 제이쿼리를 클래스를 추가하는 방법과 직접 스타일을 부여하는 방법과는 어떤 차이점이 있을까?
사실 제이쿼리(jQuery)를 사용하여 클래스명을 추가하거나 제거하는 방법말고도 직접 스타일을 부여할 수 있습니다. 예를들어 아래와 같은 attr() 또는 css() 메소드를 사용하는 방법이 존재합니다.testEle.attr('style', 'color: red');
// attr() 메소드를 사용 style 속성 지정
testEle.css('color', 'red');
// css() 메소드로 특정 css 값을 지정하는 방법
// attr() 메소드를 사용 style 속성 지정
testEle.css('color', 'red');
// css() 메소드로 특정 css 값을 지정하는 방법
보시는 것처럼 attr()를 사용하거나 css()를 사용할 수도 있습니다. 하지만 이런 경우에 inline 형태로 웹페이지에 스타일이 부여되기 때문에 아래와 같은 제약이 생기게 됩니다.
- 코드와 스타일이 분리되지 못하여 유지보수에 단점
- 인라인으로 적용된 스타일을 변경시 !important 키워드가 필요할 수 있음
이런 단점들 때문에 보통 클래스에 스타일을 정해두고 이 클래스를 추가하거나 제거하는 방법이 사용됩니다.
# 클래스를 추가하여 스타일 적용 예제보기
그렇다면 위 코드는 클래스 방식으로 어떻게 바꿀 수 있을까요? 아래처럼 사용하는 것이 좋습니다.@ style.css
.red {
color: red;
}
color: red;
}
@ style.html
<span>Color RED!!</span>
<script>
$('span').addClass('red');
</script>
<script>
$('span').addClass('red');
</script>
이제 여기에 스크립트를 아래와 같이 사용합니다.
@ style.js
$('span').addClass('red');
참고로 addClass는 이미 클래스가 추가되어있는 경우 또 다시 클래스를 추가하지 않습니다. 즉 중복되는 클래스는 자동으로 제외하기 때문에 편리하죠. 그럼 아래부터는 이를 사용한 몇 가지 예제소스를 보면서 알아보겠습니다. 먼저 addClass() 부터 알아보겠습니다.
# 제이쿼리 addClass() 정보 및 예제보기
아래는 제이쿼리를 사용한 addClass() 메소드입니다. 기본적인 문법은 아래와 같습니다.$(element).addClass('클래스명');
addClass() 속성을 사용하면 특정 요소에 새로운 클래스를 추가할 수 있습니다. 앞에 언급한 것처럼 이미 가지고 있는 클래스는 더 이상 추가되지 않습니다.
! addClass() 예제보기
만약 아래와 같이 span 태그가 존재할 경우 여기에 red 클래스를 주어 폰트색을 변경하는 예제를 만들어 보겠습니다.<style>
.red { color: red; }
</sytle>
<span>Test addClass</span>
.red { color: red; }
</sytle>
<span>Test addClass</span>
@ red.js
$('span').addClass('red');
위 코드를 실행하면 결과는 아래와 같습니다.
Test addClass
// 적용 전
Test addClass
// 스크립트 적용 후
// 적용 전
Test addClass
// 스크립트 적용 후
아래에는 스타일을 제거하는 반대 경우를 알아봅니다.
# removeClass() 정보 및 예제 알아보기
아래는 클래스를 제거하는 방법인 removeClass()를 알아봅니다. 먼저 아래와 같이 사용합니다.$(Element).removeClass('클래스명');
클래스 속성이 가지고 있는 선택한 클래스명을 삭제합니다. 이 메소드는 선택된 클래스 모두를 제거하며 만약 해당 클래스가 없는 경우 아무런 변화가 없습니다. 그럼 아래 예제를 참고하세요.
<body>
<span class="test">Test removeClass</span>
</body>
<script type="text/javascript">
$('span').removeClass('test');
</script>
</body>
<script type="text/javascript">
</script>
위 코드를 실행할 경우 아래처럼 class가 제거되어 나타납니다.
<body>
<span class>Test removeClass</span>
</span>
<span class>Test removeClass</span>
</span>
# hasClass() 메소드 정보 및 예제보기
아래는 hasClass() 메소드를 알아봅니다. 기본적인 문법은 아래처럼 사용됩니다.$(Element).hasClass('클래스명');
이 함수는 클래스 속성에 해당 값이 존재하는지를 확인 후 Boolean값을 반환합니다. 즉, 존재한다면 true를 없다면 false를 반환하게 됩니다. 아래 예제를 봐주세요.
<body>
<span class="test">Test hasClass</span>
</body>
<script type="text/javascript">
$('span').hasClass('test');
</script>
</body>
<script type="text/javascript">
</script>
위 코드를 실행하면 아래와같이 결과가 나타나게됩니다.
true
// test 클래스명이 존재하기 때문에 true가 반환되었음
// test 클래스명이 존재하기 때문에 true가 반환되었음
즉 클래스가 존재하므로 true값이 반환되었습니다. 만약 없는 경우에는 반대로 false를 반환하죠.
# 마치면서
위에 사용된 메소드는 제이쿼리에서 매우 자주 사용되는 메소드입니다. 클래스를 사용하여 스타일 지정하거나 제거하는 경우가 매우 많이 사용되기 때문이죠. 반드시 꼭 알아야하는 방법입니다.특히 토글(toggle) 및 스위치 방식의 UI에서는 대부분 이 메소드를 사용하여 구현됩니다. 그만큼 편리하고 간단하기 때문이죠!
아래의 글도 찾고 계시지 않나요?